<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
   <div class="dashboard-container" id="food-app"><br>
     <h1 align="center">查询某年各个月天气情况</h1><hr>

       <el-date-picker
               v-model="date"
               type="year"
               format="yyyy年"
               value-format="yyyy"
               placeholder="选择年份"
               start-placeholder="1961"
               end-placeholder="2019"
                @change="drawChart">
       </el-date-picker><br>

       <div id="main" style="width: 1000px;height:800px;"></div>

     </div>

  </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/food.js"></script>
   <script src="../../api/weather.js"></script>

   <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

   <script>
      new Vue({
        el: '#food-app',
        data() {
          return {
              date:'',
            chartData:{}
          }
        },
        computed: {},
        created() {
        },
        mounted() {
          //this.drawChart()
        },
        methods: {
          dateToString(date){
            var year = date.getFullYear();
            var month =(date.getMonth() + 1).toString();
            var day = (date.getDate()).toString();
            if (month.length == 1) {
              month = "0" + month;
            }
            if (day.length == 1) {
              day = "0" + day;
            }
            var dateTime = year + "-" + month + "-" + day;
            return dateTime;
          },

          /*绘制图表*/
          drawChart(){
              console.log(this.date);
            getMonth(this.date).then(res=>{
              this.chartData = res.data;
                var x=this.chartData.map(function (weather) { return weather.date});
                var y1=this.chartData.map(function (weather){return weather.highestTemperature});
                var y2=this.chartData.map(function (weather){return weather.lowestTemperature});
                var y3=this.chartData.map(function (weather){return weather.averageTemperature});
                var y4=this.chartData.map(function (weather){return weather.precipitation});

              var myChart = echarts.init(document.getElementById('main'));
              var option = {
                title: {
                  text: this.date+'年每个月份的天气情况', // 主标题
                  subtext: '', // 副标题
                  x: 'left' // x轴方向对齐方式
                },
                tooltip: {
                  trigger: 'axis' // axis   item   none三个值
                },
                xAxis: {
                  type: 'category', // 还有其他的type，可以去官网喵两眼哦
                  data: x, // x轴数据
                  name: '' // x轴名称
                  // x轴名称样式
                  // nameTextStyle: {
                  //   fontWeight: 600,
                  //   fontSize: 18
                  // }
                },
                yAxis: {
                  type: 'value',
                  name: '',// y轴名称
                  //data: y,
                  // y轴名称样式
                  // nameTextStyle: {
                  //   fontWeight: 600,
                  //   fontSize: 18
                  // }
                },
                  legend: {
                      orient: 'vertical',
                      x: 'center',
                      y: 'top',
                      data: ['high','low','avg','rain']
                  },
                  series: [
                      {
                          name: 'high',
                          data: y1,
                          type: 'line',
                      },
                      {
                          name: 'low',
                          data: y2,
                          type: 'line',
                      },
                      {
                          name: 'avg',
                          data: y3,
                          type: 'line',
                      },
                      {
                          name: 'rain',
                          data: y4,
                          type: 'line',
                      },
                ]
              };
              myChart.setOption(option);
            })

          }
        }
      })
    </script>
</body>
</html>
<style lang="scss">
    .due_month .el-date-picker__header{
        display: none;
    }
</style>